/*----------------------------------------*\
  TAB
\*----------------------------------------*/

.tabs {
  .container__center--xs & {
    @apply py-8;
    @apply broader-than-container;
  }
}

.tab__controls-container {
  @apply relative;

  &::after {
    content: '';
    @apply absolute right-0 top-0 bottom-1 w-10;
    @apply pointer-events-none;
    @apply bg-gradient-to-l from-white;

    .bg--secondary-50 & {
      @apply bg-gradient-to-l from-secondary-50;
    }

    @screen sm {
      @apply w-20;
    }
  }
}

.tab__controls {
  @apply flex;
  @apply overflow-x-auto overflow-y-hidden whitespace-nowrap;
  @apply border-b;

  .bg--secondary-50 & {
    @apply border-gray-300;
  }

  /* hide scrollbar with ability to still scroll */
  -ms-overflow-style: none;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

.tab__control {
  @apply relative;
  @apply px-4 py-4;

  &::after {
    content: '';
    @apply block;
    @apply h-[3px];
    @apply absolute right-4 bottom-0 left-4;
    @apply transition;
  }

  &.tab__control--active,
  &:hover {
    &::after {
      @apply bg-primary-500;
    }
  }
  &:hover:not(.tab__control--active) {
    @apply text-primary-600;
  }
  &:first-child {
    @apply pl-0;

    &::after {
      @apply left-0;
    }
  }
}

.tab__container {
  &.vertical-spacing {
    @apply pt-8;
  }

  &.tab__container--is-hidden {
    @apply hidden;
  }
}
